body
    font-family: 'Lato', sans-serif
    font-weight: 400
    line-height: 1.7
    color: #777
    padding: 3rem
    
.heading-primary
    color: #ffffff
    text-transform: uppercase
    backface-visibility: hidden
    margin-bottom: 6rem
    &--main
        display: block
        font-size: 6rem
        font-weight: 400
        letter-spacing: 3.5rem  
        animation-name: moveInLeft
        animation-duration: 1s
        animation-timing-function: ease-out
    &--sub
        display: block
        font-size: 2rem
        font-weight: 700
        letter-spacing: 1.75rem
        animation-name: moveInRight
        animation-duration: 1s
        animation-timing-function: ease-out
        transform: translateX(-.7rem)

.heading-secondary
    font-size: 3.5rem
    text-transform: uppercase
    font-weight: 700
    display: inline-block
    background-image: linear-gradient(to right, $lg, $dg)
    -webkit-background-clip: text
    color: transparent
    letter-spacing: .2rem   
    transition: all .2s

    &:hover
        transform: skewY(2deg) skewX(15deg) scale(1.1)
        text-shadow: .5rem 1rem 2rem rgba(#000, .2)

.heading-tertiary
    font-size: $default-font-size
    font-weight: 700
    text-transform: uppercase


.paragraph
    font-size: $default-font-size
    
    &:not(:last-child)
        margin-bottom: 3rem